<template>
  <div class="demo-wrapper">
    <div class="main-content" @click="navToDetail(mainItem)">
      <img class="main-icon" :src="mainItem.img" />
      <div class="main-text">{{ mainItem.text }}</div>
      <van-icon name="arrow" />
    </div>
    <div class="demo-sub-wrapper">
      <div v-for="item in applicationData" :key="item.text" class="sub-content" @click="navToDetail(item)">
        <img class="sub-icon" :src="item.img" />
        <div class="sub-text">{{ item.text }}</div>
        <van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Prop, Vue, Ref } from 'vue-property-decorator'
import applicationRecord from '@/assets/images/demo/applicationRecord.png'
import holiday from '@/assets/images/demo/holiday.png'
import overtime from '@/assets/images/demo/overtime.png'
import nopunch from '@/assets/images/demo/nopunch.png'
import trip from '@/assets/images/demo/trip.png'
import outpunch from '@/assets/images/demo/outpunch.png'

@Component({
  components: {}
})
export default class DemoList extends Vue {
  public mainItem: any = {
    text: '我的申请记录',
    testSrc: '//oa.58v5.cn/workbench/moblie/index#/',
    src: '//oa.58corp.com/workbench/moblie/index#/',
    img: applicationRecord
  }
  public applicationData: any = [
    {
      text: '请假申请',
      img: holiday,
      testSrc: '//bpmops.58v5.cn/process/index#/formrender?origin=apply&processKey=gGJXttQGSl&businessGroupId=3',
      src: '//bpmops.58corp.com/process/index#/formrender?origin=apply&processKey=HRVacationNew&businessGroupId=2'
    },
    {
      text: '加班申请',
      img: overtime,
      testSrc: '//bpmops.58v5.cn/process/index#/formrender?origin=apply&processKey=HROvertimeNew&businessGroupId=3',
      src: '//bpmops.58corp.com/process/index#/formrender?origin=apply&processKey=HROvertimeNew&businessGroupId=2'
    },
    {
      text: '未打卡申请',
      img: nopunch,
      testSrc: '//bpmops.58v5.cn/process/index#/formrender?origin=apply&processKey=xhfJwWFsxk&businessGroupId=3',
      src: '//bpmops.58corp.com/process/index#/formrender?origin=apply&processKey=HRDelayPunchNew&businessGroupId=2'
    },
    {
      text: '出差申请',
      img: trip,
      testSrc: '//bpmops.58v5.cn/process/index#/formrender?origin=apply&processKey=travelApply&businessGroupId=3',
      src: '//bpmops.58corp.com/process/index#/formrender?origin=apply&processKey=LszIJVDPHW&businessGroupId=2',
      mofangSrc: '',
      mofangTestSrc: ''
    },
    {
      text: '外出打卡申请',
      img: outpunch,
      testSrc: '//bpmops.58v5.cn/process/index#/formrender?origin=apply&processKey=jkyVfztaJy&businessGroupId=3',
      src: '//bpmops.58corp.com/process/index#/formrender?origin=apply&processKey=HRClockOut&businessGroupId=2',
      mofangSrc: '//bpmops.58corp.com/process/index#/formrender?origin=apply&processKey=PvNjhOIicQ&businessGroupId=2',
      mofangTestSrc: '//bpmops.58v5.cn/process/index#/formrender?origin=apply&processKey=AasyQRTPji&businessGroupId=3'
    }
  ]

  get isOnline() {
    return location.host.includes('58corp.com')
  }

  public navToDetail(item: any): void {
    location.href = this.isOnline ? item.src : item.testSrc
  }
}
</script>

<style lang="scss" scoped>
.demo-wrapper {
  .van-icon-arrow {
    position: absolute;
    // width: 8px;
    // height: 16px;
    right: 16px;
  }
  .main-content {
    background-color: #fff;
    border-radius: 8px;
    margin: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    .main-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin: 16px 0 16px 16px;
    }
    .main-text {
      padding-top: 2px;
      font-size: 16px;
      height: 40px;
      line-height: 40px;
      color: #333333;
      text-align: left;
      margin-left: 20px;
    }
  }

  .demo-sub-wrapper {
    background-color: #fff;
    height: calc(100vh - 157px - constant(safe-area-inset-bottom));
    height: calc(100vh - 157px - env(safe-area-inset-bottom));
    border-radius: 8px;
    margin: 10px 10px 20px;
    overflow: scroll;
    .sub-content {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      border-bottom: 0.5px solid #ededed;

      &:last-child {
        border-bottom: none;
      }

      .sub-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: 16px 0 16px 16px;
      }
      .sub-text {
        padding-top: 2px;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        color: #333333;
        text-align: left;
        margin-left: 20px;
      }
    }
  }
}
</style>
